<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Private Playlist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f44336">
<link rel="stylesheet" href="./w3.css">
<style>
	.w3-sidenav ul li {padding-left: 2px;}
	#playlist li {word-break: break-all;}
	.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
</style>
<style>
@media (prefers-color-scheme: dark) {
    * {
        scrollbar-color: #2a2c2e #1c1e1f;
    }
    .w3-sidenav a:hover {
        background-color: rgb(39, 41, 43);
    }
    .w3-pale-yellow, .w3-hover-pale-yellow:hover {
        color: rgb(232, 230, 227) !important;
        background-color: rgb(75, 75, 0) !important;
    }
    html, body, input, textarea, select, button {
        background-color: #181a1b;
        color: #e8e6e3;
    }
    .w3-light-grey, .w3-hover-light-grey:hover {
        color: rgb(232, 230, 227) !important;
        background-color: rgb(28, 30, 31) !important;
    }
    .w3-blue, .w3-hover-blue:hover {
        color: rgb(255, 255, 255) !important;
        background-color: rgb(9, 102, 175) !important;
    }

    #bufferbar.w3-progressbar {
        background-color: rgb(61, 61, 61) !important;
    }
    .w3-progress-container {
        background-color: rgb(28, 30, 31);
    }
    .w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover {
        background-color: rgb(39, 41, 43);
    }
    .w3-red, .w3-hover-red:hover {
        background-color: rgb(163, 19, 9)!important;
    }
}
</style>

<nav class="w3-sidenav w3-collapse w3-light-grey w3-animate-left w3-card-2" style="z-index: 3; width: 250px; display: none;" id="mySidenav">
<header class="w3-container w3-dark-grey">
	<h2>Folders <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-hide-large w3-closenav" title="close sidenav">×</a></h2>
</header>
<ul class="w3-ul" style="margin-bottom: 120px;" id="folderlist">
</ul>
</nav>
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor: pointer; display: none;" id="myOverlay"></div>
<div class="w3-main" style="margin-left:250px;">
	<header class="w3-container w3-red w3-top">
		<h2 class="ellipsis"><span class="w3-opennav w3-xlarge w3-left w3-hide-large" onclick="w3_open()" id="openNav">&#9776;</span>&nbsp;<span id="server-name">Private Cloud Music</span></h2>
	</header>
	<header class="w3-container w3-yellow"><h2 class="ellipsis">You can't see me</h2></header>
	<ul class="w3-ul w3-hoverable w3-pale-yellow" id="subfolderlist">
	</ul>
	<ul class="w3-ul w3-hoverable" style="margin-bottom: 120px;" id="playlist">
	</ul>
</div>
<div class="w3-bottom" style="z-index: 6;">
	<div class="w3-panel w3-brown">
		<div class="w3-row">
			<div class="w3-col s2 w3-container w3-left-align">
				<p><span id="curTime">0:00</span></p>
			</div>
			<div class="w3-col s8 w3-container w3-center">
				<p id="nowPlaying" class="ellipsis">Not playing at all.</p>
				<audio></audio>
			</div>
			<div class="w3-col s2 w3-container w3-right-align">
				<p><span id="totalTime">0:00</span></p>
			</div>
		</div>
		<div class="w3-container">
			<pcm-progress id="progress-bar"></pcm-progress>
		</div>
		<div class="w3-container w3-center" style="padding:6px 0px;">
			<button class="w3-btn w3-tiny" id="btn-prev">&lt;&lt;</button>
			<button class="w3-btn w3-tiny" id="btn-play">Play</button>
			<button class="w3-btn w3-tiny" id="btn-next">&gt;&gt;</button>
			<button class="w3-btn w3-tiny" id="btn-loop">Loop</button>
			<button class="w3-btn w3-tiny" id="btn-order">Order</button>
		</div>
	</div>
</div> 

<script src="./progress-bar.js"></script>
<script src="./player.js"></script>
<script>
function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
    document.getElementById("myOverlay").style.display = "none";
}
</script>
</html>
